import './Login.scss'
import { Card ,Button, Checkbox,message, Form, notification,Input} from 'antd';
import { useNavigate } from 'react-router-dom';
import axios from 'axios'
import React,{useState} from 'react'
import {setToken} from '../utils/utils'


const Login=(props)=>{
  const[userName,setUserName] = useState('');
  const[password,setPassword] = useState('');
  let navigate = useNavigate()
  const onFinish = values =>{
    console.log('Success:', values);
    const headers = {
      'Content-Type': 'application/x-www-form-urlencoded',
      'Authorization': 'Bearer token'
    }
    axios({
      method:'post',
      url:'/api/login',
      headers:headers,
      data:{
        userName:userName,
        password:password
      }
    }).then(res=>{
      console.log(res.data)
      if(res.data.message=='登录成功'){
        localStorage.setItem('isLogin',true)
        // localStorage.setItem('token',res.data.token)
        setToken(res.data.token)
        notification.info({
          message:'通知',
          description:res.data.message,
          placement:"bottomRight",
        });
        navigate('./pages/activity/activitylist')
      }
      }).catch(err=>{
        console.log(err.message)
        notification.info({
          message:'通知',
          description:'登录失败',
          placement:"bottomRight",
        });
      })
  }
  const onFinishFailed = (errorInfo) => {
    console.log('Failed:', errorInfo);
  };
  return (<>
      <div className="wrap_container">
          <div className='whiteBg'></div>
          <div className='loginWrap'>
            <Card
            title="校园志愿者管理后台"
            bordered={false}
            style={{
              width: 400,
            }}
            >
              <Form
                name="basic"
                labelCol={{span: 8,}}
                wrapperCol={{span: 16,}}
                style={{maxWidth: 600,}}
                initialValues={{remember: true,}}
                onFinish={onFinish}
                onFinishFailed={onFinishFailed}
                autoComplete="off"
              >
              <Form.Item
                label="用户名"
                name="userName"
                rules={[{
                  required: true,
                  message: '请输入用户名',
                  },]}>
                <Input placeholder='请输入用户名' type='text'
                 onChange={(e)=>setUserName(e.currentTarget.value)}
                 value={userName}
                 />
              </Form.Item>
          
              <Form.Item
                label="密码"
                name="password"
                rules={[{
                    required: true,
                    message: '请输入密码',
                  }]}
              >
                <Input.Password placeholder='请输入密码'
                value={password} type="password"
                onChange={(e)=>setPassword(e.currentTarget.value)}
                />
              </Form.Item>
              <Form.Item wrapperCol={{offset: 8,span: 16,}}>
                <Button type="primary" htmlType="submit" 
                 style={{width:'100%',
                 color: 'rgba(15, 9, 9, 0.8)',
                 border: 'none',
                 backgroundColor: 'rgb(226, 220, 219)',
                 fontSize: '18px',
                 fontWeight: 'bold'
                }}
                >
                  登录
                </Button>
                {/* <Button type="primary" htmlType="submit" style={{marginLeft:'50px'}}>
                  注册
                </Button> */}
              </Form.Item>
              </Form>
          </Card>
          </div>
      </div>
  </>)

}
export default Login